/*
 * @Author: DUST
 * @Date: 2023-06-27 13:57:22
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-28 14:42:46
 * @FilePath: \vite-project\src\views\admin\navigate\index.ts
 * @Description:
 * undefined
 */

import { websitePage, addNavigateType, websiteTypeList, addWebsite, editWebsite, deleteWebsite } from "@/api";
import BaseTable from "@/class/table";
import { Ajax, IButton } from "@/interface";
import { modalType } from "@/interface/enum";
import timeFormat from "@/utils/time";
import { message } from "ant-design-vue";
import { AxiosResponse } from "axios";
import { Ref, reactive, ref } from "vue";

export interface NavigateItem {
  index: number;
}

export interface websiteInterface {
  name: string;
  url: string;
  logoUrl: string;
  description: string;
  type: number;
  id?: number
}

export interface navigateTypeItem {
  id: number;
  name: string;
}

export enum modalOptions {
  "WEBSITETYPE" = "websiteType",
  "WEBSITEITEM" = "websiteItem",
}

class Navigate extends BaseTable<NavigateItem> {
  /**
   * @description: 表格columns
   */
  public columns = reactive([
    {
      title: "序号",
      customRender: ({ index }: { index: number }) => index + 1,
      fixed: "left",
      width: 60,
    },
    {
      title: "LOGO",
      dataIndex: "logoUrl",
      width: 70,
      action: "previewCompleteAvatar"
    },
    {
      title: "名称",
      dataIndex: "name",
      filterOperator: "like",
      filterIconIndex: "search",
      customFilterDropdown: true,
      ellipsis: true,
    },
    {
      title: "网址",
      dataIndex: "url",
      width: 200,
      ellipsis: true
    },
    {
      title: "网站类型",
      dataIndex: "typeName",
      width: 100,
    },
    {
      title: "简述",
      dataIndex: "description",
      width: 400,
      ellipsis: true,
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      customRender: ({ text }: { text: number }): string =>
        timeFormat(text, "YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "修改时间",
      dataIndex: "upTime",
      customRender: ({ text }: { text: number }): string =>
        timeFormat(text, "YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "操作",
      action: "operation",
      width: 110,
      isCheck: true,
    },
  ]);
  /**
   * @description: 类型弹窗控制器
   */
  private _typeVisible = ref<boolean>(false);
  public get typeVisible() :Ref<boolean> {
    return this._typeVisible;
  }
  /**
   * @description: 类型弹窗标题
   */
  private _typeTitle = ref<string>("");
  public get typeTitle() :Ref<string> {
    return this._typeTitle;
  }
  /**
   * @description: 弹窗类型
   */
  private _type = ref<string>("");
  public get type() :Ref<string> {
    return this._type;
  }
  /**
   * @description: 弹窗类型
   */
  private _loading = ref<boolean>(false);
  public get loading() :Ref<boolean> {
    return this._loading;
  }
  /**
   * @description: 弹窗类型
   */
  private _modalOption = ref<modalOptions>();
  public get modalOption() :Ref<modalOptions | undefined> {
    return this._modalOption;
  }
  /**
   * @description: 网站类型列表
   */
  private _typeList = ref<Array<navigateTypeItem>>([]);
  public get typeList() :Ref<Array<navigateTypeItem>> {
    return this._typeList;
  }
  /**
   * @description: 网站类型列表
   */
  private _editData = ref<websiteInterface>();
  public get editData() :Ref<websiteInterface | undefined> {
    return this._editData;
  }

  public showAddType = () => {
    this._typeVisible.value = true;
    this._typeTitle.value = "新增导航类型";
    this._type.value = modalType.ADD;
    this._modalOption.value = modalOptions.WEBSITETYPE;
  }

  public showAddWebsite = () => {
    this._typeVisible.value = true;
    this._typeTitle.value = "新增网站";
    this._type.value = modalType.ADD;
    this._modalOption.value = modalOptions.WEBSITEITEM;
  }
  /**
   * @description: 按钮列表
   */
  private _buttonList = ref<Array<IButton>>([
    {
      name: "导航类型",
      type: "primary",
      func: this.showAddType,
    },
    {
      name: "新增导航",
      type: "primary",
      func: this.showAddWebsite,
    },
  ]);
  public get buttonList(): Ref<Array<IButton>> {
    return this._buttonList;
  }
  constructor() {
    super({ AJAXFunc: websitePage });
    this.getTypeList();
  }
  /**
   * @description: 新增网站类型
   * @param {object} params：新增参数表
   */  
  public addType = (params: { name: string }) => {
    this._loading.value = true;
    addNavigateType(params).then((res: AxiosResponse<Ajax<null>>) => {
      message.success("新增成功");
      this._typeVisible.value = false;
      this.getTypeList()
    }).finally(() => {
      this._loading.value = false;
    })
  }
  /**
   * @description: 新增网站类型
   * @param {object} params：新增参数表
   */  
  public doAddWebsite = (params: websiteInterface) => {
    this._loading.value = true;
    addWebsite(params).then(() => {
      message.success("新增成功");
      this._typeVisible.value = false;
      this.getData();
    }).finally(() => {
      this._loading.value = false;
    })
  }
  /**
   * @description: 新增网站类型
   * @param {object} params：新增参数表
   */  
  public doEditWebsite = (params: websiteInterface) => {
    this._loading.value = true;
    editWebsite(params).then(() => {
      message.success("编辑");
      this._typeVisible.value = false;
      this.getData();
    }).finally(() => {
      this._loading.value = false;
    })
  }
  /**
   * @description: 弹窗提交
   * @param {object} 提交参数
   */  
  public doTypeConfirm = ({obj, type}: {obj: navigateTypeItem | websiteInterface, type: modalType}) => {
    if(type == modalType.ADD) { 
      if(this._modalOption.value == modalOptions.WEBSITETYPE) this.addType(obj);
      else if(this._modalOption.value == modalOptions.WEBSITEITEM) this.doAddWebsite(obj as websiteInterface);
    } else if(type == modalType.EDIT) {
      // if(this._modalOption.value == modalOptions.WEBSITETYPE) this.addType(obj);
      if(this._modalOption.value == modalOptions.WEBSITEITEM) this.doEditWebsite(obj as websiteInterface);
    }
  }
  /**
   * @description: 获取网站类型列表
   */  
  public getTypeList = () => {
    websiteTypeList().then((res: AxiosResponse<Ajax<Array<navigateTypeItem>>>) => {
      this._typeList.value = res.data.data;
    })
  }

  public showEdit = (record: websiteInterface) => {
    this._typeVisible.value = true;
    this._editData.value = record;
    this._typeTitle.value = "编辑网站";
    this._type.value = modalType.EDIT;
    this._modalOption.value = modalOptions.WEBSITEITEM;
  }

  public doDeleteWebsite = (record: websiteInterface) => {
    if(record?.id) deleteWebsite(record.id).then(() => {
      message.success("删除成功");
      this.getData();
    })
  }
}

export default Navigate;
